<template>

  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>团队管理</el-breadcrumb-item>
      <el-breadcrumb-item>团队活动列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="名称 : ">
              <el-input v-model="name" placeholder="请输入活动名称"></el-input>
            </el-form-item>

            <el-form-item label="地址 : ">
              <el-input v-model="address" placeholder="请输入活动发布地点"></el-input>
            </el-form-item>

            <el-form-item label="发布状态 : ">
              <el-select v-model="display" placeholder="请选择活动发布状态">
                <el-option label="请选择" :value="-1"></el-option>
                <el-option label="暂未发布" :value="0"></el-option>
                <el-option label="已发布" :value="1"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click.prevent="searchActivity">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible=true">添加团队活动</el-button>
        </el-col>

      </el-row>
      <el-table :data="ActivityList" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="活动名称" prop="name"></el-table-column>
        <el-table-column label="活动地点" prop="address"></el-table-column>
        <el-table-column label="活动简介" prop="introduce" width="300" show-overflow-tooltip></el-table-column>
        <el-table-column label="活动是否发布" prop="display">
          <template slot-scope="scope">
            <span v-if="scope.row.display == '0'" style="color: #f0a40c">暂未发布</span>
            <span v-if="scope.row.display == '1'" style="color: #67C23A">已发布</span>
          </template>
        </el-table-column>
        <el-table-column label="活动开始时间" prop="activityStartTime"></el-table-column>
        <el-table-column label="活动结束时间" prop="activityEndTime"></el-table-column>
        <el-table-column label="创建时间" prop="insertTime"></el-table-column>
        <el-table-column label="更新时间" prop="updateTime"></el-table-column>


        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.del == '0'" style="color: #67C23A">正常</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="'145px'">
          <template slot-scope="scope">
            <el-button type="warning" size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="mini" @click="removeActivityById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6 , 12, 24]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      ></el-pagination>
    </el-card>


    <!--添加团队活动-->
    <el-dialog title="添加团队活动" :visible.sync="addDialogVisible" width="60%" :close-on-click-modal="false" @close="addActivityFormClose">
      <el-form
          :model="addActivityForm"
          :rules="addActivityFormRules"
          ref="addActivityFormRef"
          label-width="150px"
          class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="addActivityForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动地点" prop="address">
          <el-input v-model="addActivityForm.address"></el-input>
        </el-form-item>
        <el-form-item label="活动是否发布" prop="display">
          <el-select v-model="addActivityForm.display" placeholder="请选择活动发布状态">
            <el-option label="暂不发布" :value="0"></el-option>
            <el-option label="立即发布" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <!--                format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒"-->
        <!--                 format="yyyy 年 MM 月 dd 日"
                                            value-format="yyyy-MM-dd"-->
        <el-form-item label="活动时间" prop="">
          <template>
            <div class="block">
              <el-date-picker
                  style="width:698px"
                  v-model="value1"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒"
                  value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="简介" prop="introduce">
          <el-input type="textarea" v-model="addActivityForm.introduce"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addActivity('addActivityFormRef')">确 定</el-button>
        <el-button @click="cancelAddActivity">取 消</el-button>
      </span>
    </el-dialog>


    <!--修改用戶-->
    <el-dialog
        title="修改活动"
        :visible.sync="editDialogVisible"
        width="60%"
        :close-on-click-modal="false"
        @close="editActivityFormClose"
    >
      <el-form
          :model="editActivityForm"
          :rules="editActivityFormRules"
          ref="editActivityFormRef"
          label-width="150px"
          class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="editActivityForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动地点" prop="address">
          <el-input v-model="editActivityForm.address"></el-input>
        </el-form-item>

        <el-form-item label="是否发布此活动" prop="display">
          <el-select v-model="editActivityForm.display" placeholder="请选择是否删除此活动">
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="活动时间" prop="">
          <div class="block">
            <el-date-picker
                style="width:698px"
                v-model="value2"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒"
                value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item label="简介" prop="introduce">
          <el-input type="textarea" v-model="editActivityForm.introduce"></el-input>
        </el-form-item>

        <el-form-item label="是否删除此活动" prop="del">
          <el-select v-model="editActivityForm.del" placeholder="请选择是否删除此活动">
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="-1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editActivity('editActivityFormRef')">确 定</el-button>
        <el-button @click="resetEditForm">取 消</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script>

export default {
  data() {
    return {
      editDialogVisible: false,
      swflag: false,
      pageNum: 1,
      pageSize: 3,
      ActivityList: [],
      total: 9,
      name: "",
      address: "",
      display: -1,
      value1: [
        new Date(2000, 10, 10, 10, 10),
        new Date(2000, 10, 11, 10, 10)
      ],
      value2: [
        new Date(2000, 10, 10, 10, 10),
        new Date(2000, 10, 11, 10, 10)
      ],
      addDialogVisible: false,
      addActivityForm: {
        name: "",
        address: "",
        display: "",
        activityStartTime: "",
        activityEndTime: "",
        introduce: "",
      },
      editActivityForm: {
        id: "",
        name: "",
        address: "",
        display: "",
        activityStartTime: "",
        activityEndTime: "",
        introduce: "",
        del: ""
      },
      editActivityFormRules: {
        name: [
          {required: true, message: "請輸入名称", trigger: "blur"},
          {min: 1, max: 20, message: "名称必须是1-20个字符", trigger: "blur"}
        ],
        address: [
          {required: true, message: "請輸入地址", trigger: "blur"},
          {min: 1, max: 40, message: "地址不能为空", trigger: "blur"}
        ],
        introduce: [{required: true, message: "请输入简介", trigger: "blur"}],
        display: [{required: true, message: "请选择活动状态", trigger: "blur"}],
        del: [{required: true, message: "请选择活动删除状态", trigger: "blur"}]
      },
      addActivityFormRules: {
        name: [
          {required: true, message: "請輸入名称", trigger: "blur"},
          {min: 1, max: 20, message: "名称必须是1-20个字符", trigger: "blur"}
        ],
        address: [
          {required: true, message: "請輸入地址", trigger: "blur"},
          {min: 1, max: 40, message: "地址不能为空", trigger: "blur"}
        ],
        introduce: [{required: true, message: "请输入简介", trigger: "blur"}],
        display: [{required: true, message: "请选择活动状态", trigger: "blur"}],
        del: [{required: true, message: "请选择活动删除状态", trigger: "blur"}]
      }
    };
  },
  methods: {
    async removeActivityById(id) {
      console.log(id + "****************");
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "/activity/del/" + id;
        this.$axios.delete(url).then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功'
            });
            this.initActivity();
          } else {
            this.$message({
              type: 'error',
              message: res.data.msg,
              duration: 3000
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    showEditDialog(id) {
      let url = "/activity/getActivityByKey/" + id;
      this.$axios.get(url).then(res => {
        if (res.data.code == 200) {
          this.editActivityForm = res.data.data;
          // this.value2[0] = res.data.data.activityStartTime;
          // this.value2[1] = res.data.data.activityEndTime;
          this.value2 = [res.data.data.activityStartTime, res.data.data.activityEndTime]
          this.editDialogVisible = true;
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 3000
          })
        }
      })
    },
    editActivityFormClose() {
      this.$refs.editActivityFormRef.resetFields();
    },
    editActivity(bbb) {
      this.$refs[bbb].validate((valid) => {  //开启校验
        if (valid) {   // 如果校验通过，请求接口，允许提交表单
          this.editActivityForm.activityStartTime = this.value2[0];
          this.editActivityForm.activityEndTime = this.value2[1];
          let url = "/activity/modify";
          // console.log(this.editActivityForm.activityStartTime)
          // console.log(this.editActivityForm.activityEndTime)
          this.$axios.put(url, this.editActivityForm)
              .then(res => {
                if (res.data.code == 200) {
                  this.$message({
                    type: "success",
                    message: res.data.msg,
                    duration: 1000
                  })
                  this.editDialogVisible = false;
                  this.initActivity();
                } else {
                  this.$message({
                    type: 'error',
                    message: res.data.msg,
                    duration: 3000
                  })
                }
              })
        } else {   //校验不通过
          return false;
        }
      });
    },
    resetEditForm() {

      this.$refs.editActivityFormRef.resetFields();//重置恢复之前的数据
      this.initActivity();
      // this.value2 = [
      //     new Date(2000, 10, 10, 10, 10),
      //     new Date(2000, 10, 11, 10, 10)
      // ];
      this.editDialogVisible = false;
    },
    addActivity(aaa) {
      this.$refs[aaa].validate((valid) => {  //开启校验
        if (valid) {   // 如果校验通过，请求接口，允许提交表单
          // console.log(this.value1);
          this.addActivityForm.activityStartTime = this.value1[0];
          this.addActivityForm.activityEndTime = this.value1[1];
          // console.log(this.value1)
          console.log(this.addActivityForm.activityStartTime)
          console.log(this.addActivityForm.activityEndTime)
          let url = "/activity/addActivity";
          this.$axios.post(url, this.addActivityForm)
              .then(res => {
                if (res.data.code == 200) {
                  this.initActivity();
                  this.$message({
                    type: 'success',
                    message: '添加成功'
                  });
                  this.addDialogVisible = false;
                } else {
                  this.$message({
                    type: 'error',
                    message: res.data.msg,
                    duration: 3000
                  })
                }
              })
        } else {   //校验不通过
          return false;
        }
      });

    },

    //关闭管理员的对话框
    addActivityFormClose() {
      this.addDialogVisible = false;
      this.$refs.addActivityFormRef.resetFields();
    },
    //取消添加管理员
    cancelAddActivity() {
      this.addDialogVisible = false;
      this.$refs.addActivityFormRef.resetFields();
    },


    searchActivity() {
      this.pageNum = 1;
      this.initActivity();
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNum = 1;
      this.initActivity();
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage;
      this.initActivity();
    },
    //初始化查询 用户信息
    initActivity() {
      let url = "/activity/listActivity";
      this.$axios.get(url, {
        params: {
          now: this.pageNum,
          size: this.pageSize,
          name: this.name,
          address: this.address,
          display: this.display
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.ActivityList = res.data.data.list;
          this.pageSize = res.data.data.pageSize;
          this.pageNum = res.data.data.pageNum;
          this.total = res.data.data.total;
        } else {
          this.$message({
            type: 'error',
            message: res.data.msg,
            duration: 1000
          })
        }
      })
    }

  },
  created() {
    this.initActivity();
  }
};


</script>

<style scoped>

</style>